// 复选框样式
input[type="checkbox"] {
    width: 12px;
    height: 12px;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    line-height: 12px;
    position: relative;
    border-radius: 3px;
    &::before{
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        background: #fff;
        width: 100%;
        height: 100%;
        border: 1px solid #d9d9d9;
        border-radius: 3px;
    }
    &:checked::before{
        content: "\2713";
        background-color: rgb(64, 158, 255);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        border: 1px solid rgb(64, 158, 255);
        color: #fff;
        font-size: 12px;
        font-weight: bold;
        border-radius: 3px;
    }
}
.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    // border: 3px solid red;
    &.default{
      width: 640px;
      height: 360px;
    }
    &.table{
      width: 800px;
      height: 94vh;
      flex-direction: column;
    }
    .item {
      border: 1px solid #eee;
      &.default{
        width:200px;
        height: 100%;
      }
      &.table{
        width:100%;
        height: 43vh;
      }
      .title {
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: rgb(245, 247, 250);
        padding: 0 15px;
        box-sizing: border-box;
        position: relative;
        & > input {
          cursor: pointer;
          &.disabled{
            cursor:no-drop;
          }
        }
        select {
          // 将默认的select选择框样式清除
          // appearance:none;
          // -moz-appearance:none;
          // -webkit-appearance:none;
          cursor: pointer;
          &.left {
            top: 18%;
            width: 50%;
            border: none;
            padding: 5px;
            border-radius: 5px;
            &:focus{
              border: 1px solid rgb(64, 158, 255);
            }
          }
          &.search{
            position: absolute;
            left: 50%;
            top: 20%;
            transform: translateX(-50%);
            font-size: 14px;
          }
        }
        .text {
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          font-size: 14px;
        }
        .num {
          font-size: 12px;
          color: rgb(64, 158, 255);
        }
      }
      .main {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        .sousuo {
          margin-top: 15px;
          width: 80%;
          height: 30px;
          border: 1px solid #ddd;
          display: flex;
          align-items: center;
          border-radius: 5px;
          font-size: 12px;
          color: #aaa;
          .icon-qingkong{
            position: absolute;
            background-color: #aaa;
            border-radius: 50%;
            color: #fff;
            &.default{
              right:25%;
            }
            &.table{
              right:17%;
            }
            &:hover{
              cursor: pointer;
            }
          }
          .icon-sousuo { 
            position: absolute;
            right: 12%;
            cursor: pointer;
            border-radius: 5px;
            color: #aaa;
            font-size: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            &:hover{
              color: rgb(64, 158, 255);
            }
          }
          .input {
            width: 100%;
            height: 100%;
            border: none;
            padding-left: 15px;
            border-radius: 5px;
            &:focus{
              border: 1px solid rgb(64, 158, 255);
            }
          }
        }
        .section {
          width: 100%;
          padding: 0 15px;
          box-sizing: border-box;
          margin: 16px 0;
          table{
            border-collapse: collapse;
            text-align: center;
            tr{
              &.checked {
                color: #fff;
                background-color: rgb(233, 75, 122);
              }
              &.label {
                &:hover {
                  background-color: rgb(236, 172, 196);
                  color: #fff;
                  cursor: move;
                }
              }
              &.disabled {
                background-color: #aaa;
                &:hover {
                  cursor: no-drop;
                }
              }
            }
            th{
              color: #fff;
              background-color: rgb(64, 158, 255);
            }
            th,td{
              border: 1px solid rgb(195, 212, 237);
              font-weight: normal;
              padding: 3px 0;
              line-height: 27px;
              // 不换行
              white-space:nowrap;
              // 文本溢出显示省略号
              text-overflow: ellipsis;
              .input {
                cursor: pointer;
              }
              .disabled {
                cursor: no-drop;
                color: #aaa;
              }
            }
            .scroll{
              width: 100%;
              height: 19.2vh;
              overflow: auto;
               /*滚动条整体样式*/
               /*高宽分别对应横竖滚动条的尺寸*/
              &::-webkit-scrollbar {
                width: 6px; 
                height: 1px;
              }
            /*滚动条里面小方块*/
              &::-webkit-scrollbar-thumb {
                border-radius: 10px;
                -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
                background: #e5e5e5;
              }
            /*滚动条里面轨道*/
              &::-webkit-scrollbar-track {
                -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
                border-radius: 10px;
                background: #ffffff;
              }
           }
          }
          .data {
            width: 100%;
            height: 200px;
            overflow: auto;
            /*滚动条整体样式*/
            /*高宽分别对应横竖滚动条的尺寸*/
            &::-webkit-scrollbar {
              width: 6px; 
              height: 1px;
            }
            /*滚动条里面小方块*/
            &::-webkit-scrollbar-thumb {
              border-radius: 10px;
              -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
              background: #e5e5e5;
            }
            /*滚动条里面轨道*/
            &::-webkit-scrollbar-track {
              -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
              border-radius: 10px;
              background: #ffffff;
            }
            .row {
              display: flex;
              align-items: center;
              position: relative;
              margin: 5px 0;
              height: 20px;
              .input {
                cursor: pointer;
              }
              .disabled {
                cursor: no-drop;
                color: #aaa;
              }
              .checked {
                color: rgb(64, 158, 255);
              }
              .label {
                position: absolute;
                left: 18%;
                &:hover {
                  color: rgb(64, 158, 255);
                  cursor: move;
                }
              }
            }
          }
          .noData {
            width: 100%;
            color: #aaa;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
        .footer {
          width: 100%;
          height: 40px;
          background-color: rgb(245, 247, 250);
          display: flex;
          justify-content: space-between;
          align-items: center;
          position: absolute;
          bottom: 50px;
          padding: 0 15px;
          box-sizing: border-box;
          .filterBtn {
            background: none;
            border: 1px solid #aaa;
            padding: 5px;
            border-radius: 5px;
            cursor: pointer;
            &:hover{
              background-color:rgb(64, 158, 255) ;
              color: #fff;
            }
          }
          .daochuBtn{
            background: none;
            border: 1px solid #aaa;
            padding: 5px;
            border-radius: 5px;
            cursor: pointer;
            &:hover{
              background-color:rgb(64, 158, 255) ;
              color: #fff;
            }
          }
        }
      }
    }
    .btns {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .btn {
        width: 80px;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 5px;
        border: none;
        color: #fff;
        margin: 5px;
        z-index: 999;
        &.default{
          background-color: rgb(64, 158, 255);
          cursor: pointer;
        }
        &.disabled{
          background-color: #aaa;
          cursor: no-drop;
        }
        i {
          font-size: 16px;
          font-weight: bold;
          margin: 0 3px;
        }
      }
    }
}
.toolTip{
    width: 200px;
    height: 40px;
    box-shadow: 0px 0px 15px rgb(78, 148, 218);
    white-space:nowrap;
     // 文本溢出显示省略号
    text-overflow: ellipsis;
    letter-spacing: 5px;
    background: linear-gradient(45deg,rgba(243, 75, 114, 0.9),rgba(216, 222, 44, 0.9),rgba(46, 103, 226, 0.9));
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    color: white;
    left: 15px;
    top: 0;
    .borderLeftTop{
       width: 10px;
       height: 10px;
       border: 2px solid gold;
       border-bottom: none;
       border-right: none;
       position: absolute;
       top: 0;
       left: 0;
    }
    .borderLeftBottom{
       width: 10px;
       height: 10px;
       border: 2px solid gold;
       border-top: none;
       border-right: none;
       position: absolute;
       bottom: 0;
       left: 0;
    }
    .borderRightTop{
       width: 10px;
       height: 10px;
       border: 2px solid gold;
       border-bottom: none;
       border-left: none;
       position: absolute;
       top: 0;
       right: 0;
    }
    .borderRightBottom{
       width: 10px;
       height: 10px;
       border: 2px solid gold;
       border-top: none;
       border-left: none;
       position: absolute;
       bottom: 0;
       right: 0;
    }
}